<template>
    <div class="order-item" @click.stop="e => $emit('click', e)">
        <div class="order-item-content">
            <van-image :width="90" :height="90" :radius="4" :src="item.imageUrl"/>
            <div class="order-item-right">
                <div class="van-multi-ellipsis--l2 order-item-name">{{item.name}}</div>
                <div class="order-item-price-quantity">
                    <price :value="item.price" color="#000" :size="16"/>
                    <span class="order-item-quantity">x{{item.quantity}}</span>
                </div>
            </div>
        </div>
        <div class="order-item-actions" v-if="existActionsSlot">
            <slot name="actions"></slot>
        </div>
    </div>
</template>

<script>
  import { Image } from "vant"
  import { order } from "@mall/api-services"
  import Price from "@/components/Price"

  export default {
    name: "OrderItem",
    components: {
      Price,
      [Image.name]: Image,
    },
    props: {
      item: order.OrderItem,
    },
    computed: {
      existActionsSlot() {
        return this.$slots["actions"]
      },
    },
  }
</script>

<style lang="scss" scoped>
    @import "../../styles/variables";

    .order-item {
        padding: 0 9px 9px 9px;

        .order-item-content {
            display: flex;

            .van-image {
                box-shadow: 0 8px 12px #ebedf0;
            }

            .order-item-right {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                margin-left: 9px;

                .order-item-name {
                    line-height: 1.2rem;
                    font-size: 14px;
                }

                .order-item-price-quantity {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-end;
                    line-height: 1rem;

                    .order-item-quantity {
                        color: $gray-6;
                        font-size: 13px;
                    }
                }
            }
        }

        .order-item-actions {
            margin-top: 9px;
        }
    }
</style>
